<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //函数中的this，表示函数的调用者
        var a =10;
        function f1(){
            var a=5;
            console.log(this);  //此处的this表示window，由window调用该函数
            //解决局部变量和全局变量同名的问题
            console.log('局部变量:', a) //此时输出a为局部变量a=5
            console.log('全局变量:', this.a) //此时输出a为全局变量a=10
            console.log('全局变量:', window.a) //a=10      
        }
        f1();


        //事件绑定的匿名回调函数中的this，表示事件源
        window.onload = function () {
            document.getElementById('d1').onclick = function () {
                console.log(this);//此时this表示事件源button；即触发事件的目标元素
            }
        }


        //构造函数中的this，表示将来new出来的当前对象
        function Stu(x,y){
            this.name=x //此处的this表示当前对象
            this.age=y 
            console.log(this);
            
        }
        var st1=new Stu('tom',56)
        var st2=new Stu('lisa',21)
        console.log(st1.name);
        
        
    </script>
</head>

<body>
    <button id="d1">点我</button>
</body>

</html>